<template>
    <div class="content">
        <div class="grid-box">
            <div class="grid-item grid-long flex-between-center">
                <h1>欢迎回来，迎接新的挑战！</h1>
                <el-button type="primary">签到</el-button>
            </div>
            <div class="grid-item flex-between-center">
                <div>
                    <span>16°</span>
                    <span>天气晴朗</span>
                </div>
                <img src="../../assets/imgs/sun.png" alt="" srcset="">
            </div>
            <div class="grid-item grid-long">
                <div class="tab-box flex-left-center">
                    <div class="tab-item" :class="isActiveTab? 'tab-active': ''">我的待办</div>
                    <div class="tab-item">沟通待办</div>
                </div>
                <div>
                    <el-table :data="tableData" style="width:100%">
                        <el-table-column type="selection"></el-table-column>
                        <el-table-column prop="area" label="所属区域" align="center"></el-table-column>
                        <el-table-column prop="deptName" label="所属部门" align="center"></el-table-column>
                        <el-table-column prop="date" label="员工" align="center">
                            <template slot-scope="scope">
                                <div>{{scope.row.userCode}}{{scope.row.userName}}</div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="dataDate" label="日期" align="center"></el-table-column>
                        <el-table-column prop="firstTime" label="上班打卡" align="center"></el-table-column>
                        <el-table-column prop="lastTime" label="下班打卡" align="center"></el-table-column>
                        <el-table-column prop="signNum" label="打卡次数" align="center"></el-table-column>
                        <el-table-column prop="date" label="操作" width="180" align="center">
                            <template slot-scope="scope">
                                <el-button @click="downLoadFile(scope.row)" type="text" style="color:#00CCCC;">查看</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
            <div class="grid-item">
                <h3>业绩统计</h3>
                <div id="char-box"></div>
            </div>
            <div class="grid-item">
                <div class="flex-between-center">
                    <h3>新闻公告</h3>
                    <div class="button-box" @click="goNewsCenter">更多</div>
                </div>
                <ul>
                    <li v-for="item in newsList" :key="item.id" class="flex-between-center">
                        <div>{{item.newsTitle}}</div>
                        <div>{{item.newsDate}}</div>
                    </li>
                </ul>
            </div>
            <div class="grid-item">
                <h3>我的日程</h3>
                <ul>
                    <li v-for="item in scheduleList" :key="item.id" class="flex-between-center">
                        <div>{{item.scheduleTitle}}</div>
                        <div>{{item.dateDate}}</div>
                    </li>
                </ul>
            </div>
            <div class="grid-item">
                <h3>更多功能</h3>
                <div class="flex flex-wrap">
                    <div v-for="(item,index) in appList" :key="index" class="app-card">
                        <div class="circle flex-center" :style="{background:colorList[index%6]}">
                            <img :src="getImgUrl(item.logo)" alt="" srcset="">
                        </div>
                        <div class="flex-center">{{item.name}}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>


// import HeaderNav from '@/components/HeaderNav.vue'
import API from '@/api'

export default{
    name: 'WelcomeView',
    components: {
    // HeaderNav
    },
    data() {
        return {
            isActiveTab: true,
            colorList: ['#00CCFF','#FF0000','#0066FF','#00CCCC','#00CCFF','#00CCCC'],
            appList: [
                {id: 1, name: '视频会议', logo: 'fuction1.png'},
                {id: 2, name: '组织学习', logo: 'fuction2.png'},
                {id: 3, name: '政府官网', logo: 'fuction3.png'},
                {id: 4, name: '档案中心', logo: 'fuction4.png'},
                {id: 5, name: '大事纪要', logo: 'fuction5.png'},
                {id: 6, name: '食堂菜单', logo: 'fuction6.png'},
            ],
            tableData: [],
            newsList: [],
            scheduleList: [],
        }
    },
    created() {
        this.getTodoList()
        this.getNewsList()
        this.getScheduleList()
        
    },
    mounted() {
        this.initEchart()
    },
    methods: {
        getImgUrl(src) {
            return require("@/assets/imgs/" + src)
        },
        // 获取待办列表
        getTodoList() {
            var params = {
                pageNum: this.pageNum,
                pageSize: this.pageSize
            }
            API.work.getTodoList(params).then(({data}) => {
                if (data && data.code === 200) {
                    this.tableData = data.data
                }
            })
        },
        // 获取新闻公告
        getNewsList() {
            API.work.getNewsList().then(({data}) => {
                if (data && data.code === 200) {
                    this.newsList = data.data
                }
            })
        },
        // 初始化echart
        initEchart() {
            var myChart = this.$echarts.init(document.getElementById('char-box'))
            myChart.setOption({
                colorBy: 'data', // 颜色获取方式
                grid: {
                    top: '20%',
                    left: 0,
                    right: 0,
                    bottom: '20%'
                },
                // x轴设置
                xAxis: {
                    type: 'category', // 类型：分类
                    axisTick: {show: false}, //刻度
                    axisLine: {show: false}, //轴线
                    data: ['第一周', '第二周', '第三周', '第四周']
                },
                // y轴
                yAxis: {
                    type: 'value',
                    show: false ,
                },
                series: [
                    {
                        data: [120, 200, 150, 80],
                        type: 'bar',
                        color: ['#EC87BF', '#00CCCC']
                    }
                ]
            })
        },
        goNewsCenter() {
            this.$router.push("/work/news");
        },
        getScheduleList() {
            API.work.getScheduleList().then(({data}) => {
                if (data && data.code === 200) {
                    this.scheduleList = data.data
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
.content {
    padding: 1.55%;
}
.button-box:hover {
    cursor: pointer;
    color: #00CCCC;
}
.grid-box {
    // 网格布局
    display: grid;
    // 定义每一列的列宽
    grid-template-columns: 367fr 627fr 377fr;
    grid-template-rows: 130px 400px 318px;
    grid-gap: 24px;
    .grid-item {
        background-color: #fff;
        h3 {
            font-size: 16px;
            font-weight: 400;
        }
    }
    .grid-long {
        grid-column-start: 1;
        grid-column-end: 3;
    }
}
.grid-item:nth-child(1) {
    background-image: url('../../assets/imgs/title.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 0 7% 0 18%;
    h1 {
        font-size: 32px;
    }
    .el-button {
        width: 110px;
    }
}
.grid-item:nth-child(2) {
    background-color: #00CCCC;
    padding: 0 10%;
    color: #fff;
    span:nth-child(1) {
        font-size: 48px;
    }
}
.grid-item:nth-child(3) {
    .tab-box {
        // width: 100%;
        height: 50px;
        .tab-item {
            text-align: center;
            width: 150px;
        }
        .tab-active {
            color: #00CCCC;
        }
    }
}
.grid-item:nth-child(4) {
    padding: 20px 10%;
    #char-box {
        width: 100%;
        height: 100%;
    }
}
.grid-item:nth-child(5) {
    padding: 20px 8%;
    ul>li {
        height: 50px;
        color: #333333;
        div:nth-child(1) {
            max-width: 70%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        div:nth-child(2) {
            color: #999999;
        }
    }
}
.grid-item:nth-child(6) {
    padding: 20px 5%;
    ul>li {
        margin-top: 20px;
        padding: 0 5%;
        height: 45px;
        background-color: #E5FAFA;
        div:nth-child(1) {
            max-width: 70%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    }
    ul>li:nth-child(1) {
        margin-top: 10px;
    }
}
.grid-item:nth-child(7) {
    padding: 20px 5%;
    .app-card {
        width: 75px;
        margin: 20px 6% 0 6%;
        .circle {
            width: 75px;
            height: 75px;
            border-radius: 50%;
            margin-bottom: 5px;
            img {
                width: 50%;
                height: 50%;
            }
        }

    }
    
}
</style>